<template>
  <div>
    <el-dialog
      @close="cancel"
      :title="rowDetail.docTitle"
      :visible.sync="detailOPen"
      width="800px"
      append-to-body
    >
      <div style="margin-bottom: 10px">
        发布时间：{{ rowDetail.createTime }}
      </div>
      <div style="margin-bottom: 10px">分类：{{ rowDetail.klgTypePath }}</div>
      <div
        class="ql-editor"
        v-html="rowDetail.content"
        v-if="rowDetail.docType == 1 || rowDetail.docType == 3"
      ></div>
      <transition-group
        v-if="rowDetail.docType == 2"
        class="upload-file-list el-upload-list el-upload-list--text"
        name="el-fade-in-linear"
        tag="ul"
      >
        <li
          :key="file"
          class="el-upload-list__item ele-upload-list__item-content"
          v-for="(file, index) in rowDetail.content
            ? rowDetail.content.split(',')
            : []"
        >
        <!-- {{ file }} -->
          <el-link :href="imgUrl+`${file}`" :underline="false" target="_blank">
            <span class="el-icon-document"> {{ getFileName(file) }} </span>
          </el-link>
        </li>
      </transition-group>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    detailOPen: false,
    rowDetail: {},
  },
  data() {
    return {
      imgUrl:this.$VUE_APP_IMG_API
    };
  },
  methods: {
    // 获取文件名称
    getFileName(name) {
      console.log(name);
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    cancel() {
      this.$emit("update:detailOPen");
      this.$emit("cancel");
    },
  },
};
</script>
